<template>
  <view class="register-container">
    <!-- 顶部波浪装饰 -->
    <view class="wave-wrapper">
      <view class="wave wave1"></view>
      <view class="wave wave2"></view>
    </view>

    <!-- 注册表单区域 -->
    <view class="register-box">
      <view class="welcome">
        <text class="title">欢迎注册</text>
        <text class="subtitle">请创建您的账号</text>
      </view>

      <view class="form-group">
        <!-- 手机号输入框 -->
        <view class="input-group">
          <image src="/static/login/account.png" mode="aspectFit" class="icon"/>
          <input 
            type="number" 
            v-model="form.phone" 
            placeholder="请输入手机号"
            maxlength="11"
            class="input"
          />
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <image src="/static/login/password.png" mode="aspectFit" class="icon"/>
          <input 
            :type="showPassword ? 'text' : 'password'" 
            v-model="form.userPassword" 
            placeholder="请输入密码"
            class="input"
          />
          <image 
            :src="showPassword ? '/static/login/eye-open.png' : '/static/login/eye-close.png'"
            mode="aspectFit"
            class="eye-icon"
            @tap="showPassword = !showPassword"
          />
        </view>

        <!-- 确认密码输入框 -->
        <view class="input-group">
          <image src="/static/login/password.png" mode="aspectFit" class="icon"/>
          <input 
            :type="showCheckPassword ? 'text' : 'password'" 
            v-model="form.checkPassword" 
            placeholder="请再次输入密码"
            class="input"
          />
          <image 
            :src="showCheckPassword ? '/static/login/eye-open.png' : '/static/login/eye-close.png'"
            mode="aspectFit"
            class="eye-icon"
            @tap="showCheckPassword = !showCheckPassword"
          />
        </view>

        <!-- 注册按钮 -->
        <button class="register-btn" @tap="handleRegister" :disabled="isSubmitting">
          {{ isSubmitting ? '注册中...' : '注册' }}
        </button>

        <!-- 其他选项 -->
        <view class="options">
          <text class="option-text" @tap="goToLogin">已有账号？去登录</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="bottom-decoration">
      <view class="circle circle1"></view>
      <view class="circle circle2"></view>
      <view class="circle circle3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { userRegisterUsingPost } from '@/backend/userController';
import type Uni from '@dcloudio/uni-app';
declare const uni: Uni;

// 表单数据
const form = reactive({
  phone: '',
  userPassword: '',
  checkPassword: ''
});

// 控制密码显示
const showPassword = ref(false);
const showCheckPassword = ref(false);
const isSubmitting = ref(false);

// 表单验证
const validateForm = () => {
  if (!form.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    });
    return false;
  }
  if (!/^1[3-9]\d{9}$/.test(form.phone)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    });
    return false;
  }
  if (!form.userPassword) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    });
    return false;
  }
  if (form.userPassword.length < 6) {
    uni.showToast({
      title: '密码不能少于6位',
      icon: 'none'
    });
    return false;
  }
  if (!form.checkPassword) {
    uni.showToast({
      title: '请确认密码',
      icon: 'none'
    });
    return false;
  }
  if (form.userPassword !== form.checkPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    });
    return false;
  }
  return true;
};

// 处理注册
const handleRegister = async () => {
  if (!validateForm()) return;
  
  isSubmitting.value = true;
  try {
    const res = await userRegisterUsingPost(form);
    
    if (res.code === 0) {
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      });
      // 延迟跳转到登录页
      setTimeout(() => {
        goToLogin();
      }, 1500);
    } else {
      uni.showToast({
        title: res.message || '注册失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('注册失败：', error);
    uni.showToast({
      title: '注册失败，请重试',
      icon: 'none'
    });
  } finally {
    isSubmitting.value = false;
  }
};

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffffff, #f8f8f8);
  position: relative;
  overflow: hidden;
}

/* 波浪动画效果 */
.wave-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.wave {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 43%;
  transform-origin: 50% 48%;
  animation: drift linear infinite;
}

.wave1 {
  animation-duration: 5s;
}

.wave2 {
  animation-duration: 7s;
  opacity: 0.3;
}

@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 底部装饰效果 */
.bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 240rpx;
  overflow: hidden;
  opacity: 0.1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.circle1 {
  width: 400rpx;
  height: 400rpx;
  bottom: -200rpx;
  left: -100rpx;
}

.circle2 {
  width: 300rpx;
  height: 300rpx;
  bottom: -100rpx;
  right: -50rpx;
}

.circle3 {
  width: 200rpx;
  height: 200rpx;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 调整注册框位置，避免被波浪遮挡 */
.register-box {
  position: relative;
  z-index: 1;
  margin-top: 220rpx;
  padding: 40rpx;
}

.welcome {
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

.form-group {
  margin-top: 60rpx;
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  background: rgba(248, 248, 248, 0.8);
  backdrop-filter: blur(10px);
  padding: 24rpx 32rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  padding: 10rpx;
}

.register-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 44rpx;
  margin-top: 60rpx;
  box-shadow: 0 8rpx 16rpx rgba(255, 87, 34, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.3s ease;
}

.register-btn:disabled {
  opacity: 0.6;
}

.options {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  padding: 0 20rpx;
}

.option-text {
  font-size: 26rpx;
  color: #666;
  transition: color 0.3s ease;
}

.option-text:active {
  color: #ff5722;
}
</style> 